<template>
  <div>
    <div class="unity-engineer-subtitle" v-if="title!=''">
      <div class="mark-icon">
        <img :src="imgTitleLeft" alt="标题左侧图"/>
      </div>
      <div class="name">{{title}}</div>
    </div>
    <div class="unity-table-div zhfx-warning-box">
      <div class="unity-table-box warning">
        <div class="unity-table-th">
          <el-row class="unity-table-th-row">
            <el-col :span="4">
              <div class="text-center">序号</div>
            </el-col>
            <el-col :span="10">
              <div class="text-center">预警类型</div>
            </el-col>
            <el-col :span="10">
              <div class="text-center">预警值</div>
              <!--<div class="text-center">预警时间</div>-->
            </el-col>
          </el-row>
        </div>
        <div class="unity-table-scroll-box" :style="{'height':height}">
          <div class="unity-table-tr" v-for="(item, index) in warnList"
               :key="index"
               @click="changeWarnSelected(item, index)" :class="{
                red: item.level == 1,
                orange: item.level == 2,
                'light-yellow': item.level == 3,
                blue: item.level == 4,
                active: curWarnIds.indexOf(item.id) > -1
              }">
            <el-row class="unity-table-tr-row">
              <el-col :span="4" class="unity-table-td">
                <div class="text-center text-ellipsis-1">
                  {{ (warnCurPage - 1) * warnPageSize + (index + 1) }}
                </div>
              </el-col>
              <el-col :span="10" class="unity-table-td name">
                <el-popover
                  width=""
                  trigger="hover"
                  placement="top"
                  popper-class="u_my_popover">
                  <span class="u_my_more_span">
                    {{ item.device_type_name?(item.device_type_name+'预警：'+(item.time ? item.time.substr(5, 11) : "无")):'未知'}}
                  </span>
                  <div slot="reference" class="name-wrapper"
                       :style="'color:'+(level[item.level-1].color)">
                    <span
                      class="list-name" style="text-align: center;">{{ item.device_type_name?item.device_type_name+'预警':'未知'
                  }}</span>
                  </div>
                </el-popover>
                <!-- <div class="name-wrapper" v-else :style="'color:'+(level[item.level-1].color)">
                   <span class="list-name" style="text-align: center;">{{ item.device_type_name?item.device_type_name+'预警':'未知'
                    }}</span>
                 </div> -->
              </el-col>
              <el-col :span="10" class="unity-table-td">
                <div class="text-center text-ellipsis-1">
                  {{
                  /*item.time ? item.time.substr(5, 11) : "无"*/
                  item.value_num?(item.value_num+(item.type_unit||'')):'--'
                  }}
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import UnityIm from "../../utils/unityIm";

  export default {
    name: "early-warn-list",
    props: {
      from: {
        type: String,
        default() {
          return ''
        }
      },
      fromType: {
        type: String,
        default() {
          return ''
        }
      },
      title: {
        type: String,
        default() {
          return '预警记录'
        }
      },
      height: {
        type: String,
        default() {
          return '505px'
        }
      },
      isCancelSelected: {
        type: Boolean,
        default() {
          return false
        }
      },
      unityParams: {
        type: Object | String,
        default() {
          return ''
        }
      },
    },
    data() {
      return {
        imgTitleLeft: this.staticFilePathDomain
          + "static/img/engineer/icon_title_left.png",
        warnCurPage: 1,
        warnPageSize: 100,
        warnTotal: 0,
        curWarnIds: [],
        warnList: [],
        level: [
          {
            color: "#FF4A53",
            bac_color: "#FF4A53",
            level: 1,
            level_name: "特别严重",
            level_chinese: "一级",
            title_bg_color: "linear-gradient(-77deg, #FF4A53 0%, #FF4A53 99%)"
          },
          {
            color: "#FF8920",
            bac_color: "#FF8920",
            level: 2,
            level_name: "严重",
            level_chinese: "二级",
            title_bg_color: "linear-gradient(-77deg, #FF8920 0%, #FF8920 99%)"
          },
          {
            color: "#FCC70E",
            bac_color: "#FCC70E",
            level: 3,
            level_name: "较重",
            level_chinese: "三级",
            title_bg_color: "linear-gradient(-77deg, #FCC70E 0%, #FCC70E 99%)"
          },
          {
            color: "#0CACFF",
            bac_color: "#0CACFF",
            level: 4,
            level_name: "一般",
            level_chinese: "四级",
            title_bg_color: "linear-gradient(-77deg, #0CACFF 0%, #0CACFF 99%)"
          }
        ],
      }
    },
    watch: {
      from:{
        handler(val, oldVal) {
          if (val&&val=='kanBanEarlyWarn') {
              this.getWarningList(this.warnCurPage, this.unityParams);
          }
        }, immediate: true, deep: true,
      },
      isCancelSelected: {
        handler(val, oldVal) {
          if (oldVal != undefined && typeof val == "boolean" && val) {
            this.curWarnIds = [];
            this.$emit('updateWarnIsCancelSelected', false);
          }
        }, immediate: true, deep: true,
      },
      unityParams: {
        handler(val, oldVal) {
          if (val) {
            if (val != '') {
              this.getWarningList(this.warnCurPage, val);
            }
          }
        }, immediate: true, deep: true,
      },
    },
    methods: {
      getWarningList(page_num, params) {
        let data = {
          page: page_num,
          size: this.warnPageSize,
          has_engine: '-1',
          type: params.type_parent_id,
          id: params.type_parent_id,
        };
        if (params.type == 'engineer') {
          data.has_engine = 0
          data.type = params.type_parent_id
          data.id = params.type_parent_id
        }
        if (params.type == 'river') {
          data.has_engine = 1
          data.type = params.type_parent_id
          data.id = params.type_parent_id
        }
        this.$apis.v2_warn_list_page(data).then(res => {
          if (res.result == 0) {
            let resData = res.data || [];
            resData.level = Number(resData.level)

            if (this.fromType == 'flood') {
              // 处理数据 只留下水位预警和雨量预警
              let newArray = []; //新数组
              let j = 0;
              for (let i in resData) {
                if (resData[i].device_type == 1 || resData[i].device_type
                  == 4) {
                  newArray[j++] = resData[i];
                }
              }
              resData = newArray;
            }
            this.warnList = resData;
            this.warnCurPage = res.page || 1;
            this.warnTotal = res.rows || 0;
          }
        });
      },
      changeWarnSelected(item, index) {
        if (this.curWarnIds.length > 0) {
          if (this.curWarnIds[0] == item.id) {
            // this.curWarnIds.splice(0, 1);
          } else {
            this.curWarnIds.splice(0, 1, item.id);
            UnityIm.updateSelectRiverEngineerEarlyWarn(this.from, item);
          }
        } else {
          this.curWarnIds.push(item.id);
          UnityIm.updateSelectRiverEngineerEarlyWarn(this.from, item);
        }
      },
    }
  }
</script>

<style scoped>

</style>
